






<div class="admin-biaogelist">


        <div class="app-container" id="hunterlog">

            <div class="bodybox">
                <div class="hang"><span class="title">搜索条件</span></div>
                <el-form ref="form" :model="form" label-width="120px">

                    <el-form-item label="类型:">
                        <el-select v-model="form.type" placeholder="选择类型" clearable filterable>
                            <el-option :key='key' v-for="(value, key) in this.typelist" v-bind:label="value"
                                       v-bind:value="key"/>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="输入用户名:">
                        <el-input v-model="form.username" placeholder="输入用户名"/>
                    </el-form-item>

                    <el-form-item label="选择类型:">
                        <el-select v-model="form.group" placeholder="选择类型" disabled clearable >
                            <el-option :key='key' v-for="(value, key) in this.listgroup"   v-bind:label="value.name"  v-bind:value="value.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择销售/推荐人:">
                        <el-select v-model="form.recommender_id" placeholder="选择销售" clearable filterable disabled>
                            <el-option :key='key' v-for="(value, key) in this.salerlist" v-bind:label="value.username"
                                       v-bind:value="value.id"/>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="选择时间:" class="timeinputbox">
                        <el-col :span="11">
                            <el-date-picker
                                    v-model="form.createDate[0]"
                                    type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="开始时间"
                                    style="width: 100%;"
                            />
                        </el-col>
                        <el-col :span="2" class="line">-</el-col>
                        <el-col :span="11">
                            <el-date-picker
                                    v-model="form.createDate[1]"
                                    type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="结束时间"
                                    style="width: 100%;"
                            />
                        </el-col>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button @click="onCancel">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="bodybox">
                <div class="hang">
                    <span class="title">数据列表</span>

                </div>

                <el-table
                        v-loading="listLoading"
                        :data="list"
                        element-loading-text="Loading"
                        border
                        fit
                        highlight-current-row
                >

                    <el-table-column label="用户名" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.username }}
                        </template>
                    </el-table-column>
                    <el-table-column label="类型" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.type }}
                        </template>
                    </el-table-column>
                    <el-table-column label="推荐人/销售" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.recommender }}
                        </template>
                    </el-table-column>


                    <el-table-column label="原有金额" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.capital }}
                        </template>
                    </el-table-column>
                    <el-table-column label="金额变动" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.money }}
                        </template>
                    </el-table-column>
                    <el-table-column label="剩余金额" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.balance }}
                        </template>
                    </el-table-column>
                    <el-table-column label="原有金币" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.capital_gold }}
                        </template>
                    </el-table-column>
                    <el-table-column label="金币变动" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.gold }}
                        </template>
                    </el-table-column>
                    <el-table-column label="剩余金币" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.balance_gold }}
                        </template>
                    </el-table-column>

                    <el-table-column label="任务单量" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.number }}
                        </template>
                    </el-table-column>
                    <el-table-column label="时间" width="180" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.addtime }}
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.remarks }}
                        </template>
                    </el-table-column>

                </el-table>
                <div class="hang">
                    <el-pagination
                            background
                            @size-change=""
                            @current-change="current_change"
                            layout="total,prev, pager, next"
                            :page-size="this.limit"
                            :total="total">
                    </el-pagination>
                </div>
            </div>


        </div>







</div>

<script>


    new Vue({
        el: '#hunterlog',
        filters: {
            statusFilter(status) {
                const statusMap = {
                    1: 'success',
                    '正常': 'success',
                    0: 'gray',
                    '禁用中': 'danger'
                };
                return statusMap[status]
            }
        },

        data() {
            const validatemobile = (rule, value, callback) => {
                if (value.length < 11) {
                    callback(new Error('手机号必须为11位'));
                    return false;
                } else {
                    callback()
                    var url = '/Welcome/checkphone';
                    var postdata = {};
                    postdata.phone = value;
                    ajax(url, postdata).then((data) => {
                        if (data.code == 0) {
                            callback()
                        } else {
                            callback(new Error(data.msg))
                        }
                    });
                }
            }
            const validatediscount = (rule, value, callback) => {
                if (this.updateform.coupontype == "ZKJ") {
                    if (value <= 0 || value >= 10) {
                        callback(new Error('请输入0-10之间的数字'))
                    }
                } else {
                    if (value <= 0) {
                        callback(new Error('请输入0以上的数字'))
                    }
                }
                callback()
            };
            const validatefy = (rule, value, callback) => {
                if (value < 0 || value > 100) {
                    callback(new Error('请输入0-100之间的数字'))
                }
                callback()
            };
            return {
                form: {
                    user_id:user_id,
                    type:'',
                    group:'3',
                    username: "",
                    recommender_id: "",
                    createDate: [],
                },
                dialogupdateform: false,
                vipstatuslist: ["普通", 'VIP'],
                formLabelWidth: '150px',
                dialogFormVisible: false,
                dialogasetprice: false,//余额设置
                dialogaCommission: false,//佣金
                typelist: null,//类型列表
                listgroup:null,
                salerlist: null,//销售列表
                page: 1,
                limit: 10,
                total: 0,
                list: null,
                listLoading: true,
            }
        },
        created() {

            this.select();
        },
        mounted() {


            //this.form.createDate[0]=today+" 00:00:00";
            //this.form.createDate[1]=today+" 23:59:59";
            this.getRouterData();
        },

        methods: {
            getRouterData() {
                var today=toolCase.getDateStr(0)

                this.getlist();
            },
            select() {
                var url = '/Customer/getconfig/paylog_type';
                var postdata = {};

                ajax(url).then((data) => {
                    if (data.code == 0) {
                        this.typelist = data.list;
                    } else {
                        this.$message({
                            message: data.msg,
                            type: 'warning',
                            offset: 300,
                            duration: 1500
                        });

                    }
                });

                url = '/Customer/getsalerlist';
                ajax(url, {
                    select: 'id,username',
                }).then((data) => {
                    if (data.code == 0) {
                        this.salerlist = data.list;
                    } else {
                        this.$message({
                            message: data.msg,
                            type: 'warning',
                            offset: 300,
                            duration: 1500
                        });

                    }
                });
                url= '/Welcome/getconfiglist';
                ajax(url,{
                    name:'group'
                }).then((data)=>{
                    if (data.code == 0){
                        this.listgroup = data.list;
                    }else{
                        this.$message({
                            message:data.msg,
                            type: 'warning',
                            offset: 300,
                            duration: 1500
                        });

                    }
                });

            },
            getlist(page) {
                this.listLoading = true;
                var url = 'Customer/getbusinesspaylog';
                var postdata = {};
                $.each(this.form, function (i, v) {
                    postdata[i] = v;
                });
                if (page) {
                    this.page = page
                    postdata.page = this.page;
                } else {
                    postdata.page = 1;
                    this.page = 1;
                }
                postdata.epage = this.limit;
                if (postdata.createDate.length > 0) {
                    postdata.date1 = postdata.createDate[0];
                    postdata.date2 = postdata.createDate[1];
                    delete postdata.createDate;
                }
                var that = this;
                ajax(url, postdata).then((data) => {
                    if (data.code == 0) {
                        that.listLoading = false;
                        that.list = data.list;
                        that.total = data.count
                    } else {
                        that.listLoading = false;
                        that.$message({
                            message: data.msg,
                            type: 'warning',
                            offset: 300,
                            duration: 1500
                        });

                    }
                });


            },
            getexcel(){

                var url ='/Customer/getbusinesspaylog';
                var postdata = {};
                $.each(this.form, function (i, v) {
                    postdata[i] = v;
                });
                postdata.page = 1;
                postdata.epage= 3000;
                if (postdata.createDate.length > 0) {
                    postdata.date1 = postdata.createDate[0];
                    postdata.date2 = postdata.createDate[1];
                    delete postdata.createDate;
                }
                var that = this;
                postExcelFile(url, postdata).then((data) => {
                    if (data.code != 0){
                        that.$message({
                            message: data.msg,
                            type: 'warning',
                            offset: 300,
                            duration: 1500
                        });
                    }
                });

            },

            onSubmit() {
                this.getlist();
            },
            onCancel() {
                Object.assign(this.$data.form, this.$options.data().form);
            },
            current_change(currentPage) {
                this.page = currentPage;
                this.getlist(currentPage);
            },


        }
    })

</script>



<style scoped>
    .el-form-item {
        margin-top: 5px;
        margin-bottom: 2px;
        width: 45%;
        max-width: 420px;
        float: left;
        margin-left: 1%;
    }

    .timeinputbox{
        width: 560px;
        max-width: 560px;
    }

    .bodybox {
        background-color: white;
        width: 96%;
        margin: auto;
        margin-top: 10px;
    }

    .el-table {
        border: solid 1px rgba(233, 233, 233, 1)
    }

    .el-form {
        height: auto;
        overflow: hidden;
        padding-bottom: 10px;
    }

    .hang {
        width: 100%;

        border-bottom: 0;
        height: 45px;
    }

    .hang .el-button {
        float: right;
        margin-right: 10px;
        height: 35px;
        line-height: 10px;
        margin-top: 5px;
    }


    .title {
        font-size: 13px;
        font-weight: 700;
        margin-left: 20px;
        line-height: 40px;
    }


    .line {
        text-align: center;
    }

    /deep/ .el-button + .el-button {
        margin-left: 1px;
    }

    .el-pagination {
        margin-top: 5px;
        float: right;
        margin-right: 20px;
    }

</style>

<style>
    .el-form-item__label {
        height: 35px;
        line-height: 35px;
        font-size: 13px;
    }

    .el-form-item__content {
        line-height: 35px;
        height: 35px;
    }

    .el-input__inner {
        height: 35px;
    }

    .el-button {
        height: 35px;
        line-height: 10px;
    }

    .el-cascader {
        height: 35px;
        line-height: 35px;
    }

    .el-table td, .el-table th {
        padding: 6px 0px;
    }


    .el-dialog /deep/ .el-form {
        border: 0;
    }

    .el-dialog__headerbtn {
        font-size: 20px;
        top: 10px;
    }

    .el-dialog /deep/ .el-dialog__header {
        padding: 10px 20px 10px;
        background-color: rgba(242, 242, 242, 1);
        border-bottom: solid 1px rgba(228, 228, 228, 1);;
    }

    .el-dialog /deep/ .el-dialog__body {
        padding: 0px 20px;
    }

    .el-dialog /deep/ .el-form-item {
        margin-top: 10px;
        margin-bottom: 20px;
        width: 45%;
        float: left;
        margin-left: 1%;
    }

    .el-table /deep/ .has-gutter tr {
        /*  display: table-cell !important;*/
        background-color: #f5f5f5;

    }

    .el-table /deep/ .has-gutter th {
        display: table-cell !important;
        background-color: #f5f5f5;
        padding: 10px 0;
    }

    .el-table .el-table__header th {
        display: table-cell !important;
        background-color: #f5f5f5;
        padding: 10px 0;
    }


    .el-cascader {
        width: 100%;
    }


    .el-input, .el-select {
        width: 100%;
    }

    .el-dialog {
        display: flex;
        flex-direction: column;
    }


</style>